<template>
	<view :style="viewColor">
		<skeleton :show="showSkeleton" :isNodes="isNodes" ref="skeleton" loading="chiaroscuro" selector="skeleton"
			bgcolor="#FFF"></skeleton>
		<view class='productSort' :style="{visibility: showSkeleton ? 'hidden' : 'visible', height: winHeight+ 'px' }">
			<view class="navTabBox" v-if="is_label == 1">
				<view class="longTab">
					<view class="tab-item" v-for="(item,index) in tabList" :key="index" :class="{'on':index == tabIndex}" @click="bindTab(index)"><text>{{item.title}}</text></view>
				</view>
			</view>
			<!-- <view class='header acea-row row-center-wrapper' v-if="tabIndex">
				<navigator url="/pages/columnGoods/goods_search/index" class='acea-row row-between-wrapper input skeleton-rect' hover-class="none">
					<text class='iconfont icon-sousuo'></text>
					<view class="input-box">点击搜索商品信息</view>
				</navigator>
			</view> -->
			<scroll-view class="popular_circle" scroll-y="true" scroll-with-animation  @scrolltolower="loadMoreData" v-if="!tabIndex">
				<view class="popular_circle_t" v-if="is_label == 1">
					<view class="popular_circle_title">热门圈子</view>
				</view>
				<view class="circle_hot_list" scroll-x="true" scroll-with-animation='true' v-if="list_host_circle.length && is_label == 1">
					<view v-for="(item,index) in list_host_circle" v-bind:key="index" class="popular_circle_item" :style="{'background': '#fff url('+item.avatar+') center / 100% 100% no-repeat'}">
						<view class="popular_circle_item_c">
							<view class="popular_circle_item_cotent">
								<view class="popular_circle_item_title line2">{{item.title}}</view>
								<view class="popular_circle_item_avatar">
									<image v-for="(u,i) in item.user_circle" :key="i" :src="u.user.avatar || '/static/images/f.png'" />
									<image :src="domain + '/uploads/default/20230630/0f3baf7d36e9071765fd02bd3da9436f.png'" />
								</view>
								<view class="popular_circle_item_num">{{item.user_circle_count}}粉丝 {{item.circle_community_count}}人讨论</view>
								<view class="popular_circle_item_join" :class="item.is_user_circle ? 'is_user_circle' : ''" @click="getCircleInfo(item.id)">{{item.is_user_circle ? '进群' : '加群'}}</view>
							</view>
						</view>
						<image class="popular_circle_label" :src="domain + '/uploads/default/20230630/150e268056f45032d049ce9eee4d1a0d.png'"/>
					</view>
				</view>
				<view class="popular_circle_t" v-if="is_label == 1">
					<view class="popular_circle_title" style="margin-top: 50rpx;">行业热圈</view>
				</view>
				<view class="popular_circle_tag" v-if="is_label == 1">
					<!-- <swiper class="popular_circle_tag_list" acceleration display-multiple-items="4" style="height: 50rpx;" @change="tap3">
						<swiper-item class="popular_circle_tag_item" v-for="(item,index) in productList" :key='index' :class="check_label_id == item.label_id ? 'popular_circle_tag_item_on' : ''" :id="'id'+index" @click="tap(item.label_id)">
							{{item.label_name}}
						</swiper-item>
					</swiper> -->
					<scroll-view class="nav-label-list" scroll-x="true" scroll-with-animation="true"  show-scrollbar="true" scroll-left="0" :scroll-into-view="'id'+check_label_id">
						<view class="nav-label-tab" v-for="(item,index) in productList" :data-index="index" :class="check_label_id == item.label_id ? 'nav-label-active' : ''" @click="tap(item.label_id)" :key="index" :id="'id'+item.label_id">
							{{item.label_name}}
						</view>
					</scroll-view>
					<view class="more_label" @click="is_label_list_popup = !is_label_list_popup"><image :src=" domain + '/uploads/def/20230630/bba7cebb1358e33d19bdece4204cb7ef.png'" /></view>
				</view>
				<view class="popular_circle_list">
					<view v-for="(item, index) in list_circle" :key="index" class="circle-item">
						<view class='circle-item-avatar'>
							<view class="unread-message">99+</view>
							<image :src="item.avatar" />
						</view>
						<view class='circle-item-info'>
							<view class='circle-item-title'>{{item.title}}</view>
							<view class="circle-item-gz">
								<image class="circle-item-gz-icon" :src="domain + '/uploads/default/20230628/2c7d68b982302e32ccfa8c0a3d922319.png'" />
								<view  class="circle-item-gz-num">{{item.user_circle_count}}粉丝</view>
							</view>
							<view class="circle-item-gz-user" v-if="item.user_circle.length">
								<image class="circle-item-gz-avatar" v-for="(v,i) in item.user_circle" :key="i" :src="v.user.avatar || '/static/images/f.png'" />
								<image class="circle-item-gz-avatar" :src="domain + '/uploads/default/20230629/436303b1fccbd3e1714b11990d5b7e28.png'" />
								<view class="circle-item-gz-tl">{{item.circle_community_count}} 人在讨论</view>
							</view>
						</view>
						<view class='circle-item-button'>
							<view class="circle-item-button_btn" :class="item.is_user_circle ? 'is_user_circle' : ''" @click="getCircleInfo(item.id)">{{item.is_user_circle ? '进群' : '加群'}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<view class='search acea-row row-between-wrapper' v-if="tabIndex">
				<view class='input acea-row row-between-wrapper'>
					<text class='iconfont icon-sousuo2'></text>
					<input type='text' :value='searchValue' placeholder='请输入关键字' placeholder-class='placeholder'
					 @input="setValue"></input>
				</view>
				<view class='bnt' @tap='searchCircle'>搜索</view>
			</view>
			<view class="con-box" v-if="tabIndex">	
				<view class='aside'>	
					<scroll-view scroll-y="true" style="height: 100%; overflow: hidden;" scroll-with-animation='true' :scroll-into-view="intoindex">
						<view v-for="(item,index) in productList" v-bind:key="index">
							<view class='item' :class='item.label_id==check_label_id?"on":""' :key="item.label_id" @click='tap(item.label_id)' :id='"sort"+index'><text class="item_text skeleton-rect">{{item.label_name}}</text>
							 </view>
						</view>
					</scroll-view>
				</view>
				<view class='conter'>
					<scroll-view scroll-y="true" :scroll-into-view="toView" style="height: 100%; overflow: hidden;" @scrolltolower="loadMoreData" scroll-with-animation='true'>
						<view>
							<view class='listw' v-if="productList_children.length && tabIndex">
								<swiper class="swiper_list_user">
									<swiper-item class="list_user" v-for="(p_list, p_index) in productList_children" :key="p_index">
										<view class="children_label" v-for="(item, index) in p_list" :key="index" :class="navActive2 == item.label_id ? 'children_label_on' : ''" @click='tap2(item.label_id)'>{{item.label_name}}</view>
									</swiper-item>
								</swiper>
							</view>
							<view v-if="list_circle.length" :class="tabIndex ? 'circle-list' : 'circle-list-popular'">
								<view v-for="(item, index) in list_circle" :key="index" class="circle-item" style="border-bottom: 2rpx solid #F4F0F0;">
									<view class='circle-item-avatar'>
										<view class="unread-message">99+</view>
										<image :src="item.avatar" />
									</view>
									<view class='circle-item-info'>
										<view class='circle-item-title'>{{item.title}}</view>
										<!-- <view class='circle-item-label_name'>{{item.label.list[0].label_name}}{{item.label.list[1] ? '-' + item.label.list[1].label_name : ''}}</view> -->
										<view class="acea-center">
											<view style="flex: 1;">
												<view class="circle-item-gz">
													<image class="circle-item-gz-icon" :src="domain + '/uploads/default/20230628/2c7d68b982302e32ccfa8c0a3d922319.png'" />
													<view  class="circle-item-gz-num">{{item.user_circle_count}}粉丝</view>
												</view>
												
												<view class="circle-item-gz-user">
													<view class="circle-item-gz-tl" style="margin-left: 0;">{{item.circle_community_count}} 人在讨论</view>
												</view>
												
												<view class="circle-item-gz-user" style="margin-top: 10rpx;">
													<image class="circle-item-gz-avatar" v-for="(v,i) in item.user_circle" :key="i" :src="v.user.avatar || '/static/images/f.png'" />
													<image class="circle-item-gz-avatar" :src="domain + '/uploads/default/20230629/436303b1fccbd3e1714b11990d5b7e28.png'" />
												</view>
											</view>
											<view class='circle-item-button'>
												<view class="circle-item-button_btn" :class="item.is_user_circle ? 'is_user_circle' : ''" @click="getCircleInfo(item.id)">{{item.is_user_circle ? '进群' : '加群'}}</view>
											</view>
										</view>
										
									</view>
									<!-- <view class='circle-item-button'>
										<view class="circle-item-button_btn" :class="item.is_user_circle ? 'is_user_circle' : ''" @click="getCircleInfo(item.id)">{{item.is_user_circle ? '进群' : '加群'}}</view>
									</view> -->
								</view>
							</view>
						</view>
						<view :style='"height:"+(height-300)+"rpx;"'></view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="foot" v-if="newData.status && newData.status.status">
			<view class="page-footer" id="target" :style="{'background-color':newData.bgColor.color[0].item}">
				<view class="foot-item" v-for="(item,index) in newData.menuList" :key="index"
					@click="goRouter(item, index)">
					<block v-if="![2,3].includes(index)">
						<block v-if="item.link == activeRouter">
							<image :src="item.imgList[0]"></image>
							<view class="txt" :style="{color:newData.activeTxtColor.color[0].item}">{{item.name}}
							</view>
						</block>
						<block v-else>
							<span v-if="index == 4 && userInfo.log_count > 0" class="remind_tips">{{userInfo.log_count > 99 ? '99+' : userInfo.log_count}}</span>
							<image :src="item.imgList[1]"></image>
							<view class="txt" :style="{color:newData.txtColor.color[0].item}">{{item.name}}</view>
						</block>
					</block>
					<block v-else-if="index == 2">
						<image class="foot-item-add" :src="item.imgList[0]"></image>
						<view class="txt" style="font-size: 32rpx;margin-bottom: 40rpx;">发布</view>
					</block>
					<block v-else-if="index == 3">
						 <!-- && is_community_video_start == 1 -->
						<block v-if="item.link == activeRouter">
							<image :src="item.imgList[0]"></image>
							<view class="txt" :style="{color:newData.activeTxtColor.color[0].item}">{{item.name}}
							</view>
						</block>
						<block v-else>
							<image :src="item.imgList[1]"></image>
							<view class="txt" :style="{color:newData.txtColor.color[0].item}">{{item.name}}</view>
						</block>
					</block>
				</view>
			</view>
		</view>
		<!-- 发布弹窗 -->
		<publishPopup :isPublishPopup="isPublishPopup" @closePublishPopup="closePublishPopup"></publishPopup>
		<labelListPopup :is_label_list_popup="is_label_list_popup" :labelList="productList" :tabId="navActive" @onChangeTag="onChangeTag"></labelListPopup>
	</view>
</template>
<script>
	 
	let app = getApp(); 
	import { getUserInfo } from '@/api/user.js';
	import { getLabelList } from '@/api/api.js';
	import { getListCircle, getAttentionCircle } from '@/api/circle.js';
	import { getNavigation } from '@/api/public.js'
	import { configMap } from '@/utils/index';
	// #ifndef H5
	import passwordPopup from '@/components/passwordPopup';
	// #endif
	import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
	import labelListPopup from '@/components/labelListPopup';
	import publishPopup from '@/components/publishPopup';
	import { mapGetters } from "vuex";
	import { HTTP_REQUEST_URL } from '@/config/app';
	export default {
		components: {
			easyLoadimage,
			// #ifndef H5
			passwordPopup,
			// #endif
			labelListPopup,
			publishPopup
		},
		computed: configMap({navigation: {}, is_community_video_start: 0},mapGetters(['isLogin','viewColor','keyColor'])),
		data() {
			let active = 0;
			return {
				domain: HTTP_REQUEST_URL,
				showSkeleton: true, //骨架屏显示隐藏
				isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
				navlist: [],
				hotList: [], //推荐分类
				productList: [],
				navActive: 0,// 弃用
				check_label_id: 0,
				navActive2: -1,
				activceCate: active,
				number: "",
				height: 0,
				hightArr: [],
				toView: "",
				winHeight: 0,
				pidIndex: 0,
				intoindex: "",
				pid: '',
				newData: {},
				activeRouter: '',
				keywords: '',
				productList_children: [],
				list_circle: [],
				list_host_circle: [],
				label_id: 0,
				label_id2: 0,
				page: 1,
				limit: 10,
				is_next_page_true: true,
				loading: true,
				tabIndex:0,
				tabList:[
					{
						title:'热门圈子'
					},
					{
						title:'行业圈子'
					}
				],
				searchValue: '',
				is_label_list_popup: false,
				isPublishPopup: false,
				userInfo: {},
				is_label: 1,
			}
		},
		onLoad(options) {
			let that = this;
			const index = uni.getStorageSync('storeIndex');
			if(options.activceCate){
				this.activceCate = options.activceCate;
			}else if(index){
				this.activceCate = index;
				uni.removeStorageSync('storeIndex');
			}
			uni.getSystemInfo({
				success: function(res) {
					that.winHeight = res.windowHeight
				},
			});
			let label_id = 0;
			if (options.scene) {
				var value = that.$util.getUrlParams(decodeURIComponent(options.scene));
				label_id = value.label_id
			}
			this.getLabel(label_id);
			if (options.is_label && options.is_label == 2) {
				this.is_label = options.is_label
			}
			
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			return {
				title: '百万群圈，免费代发广告，每条广告获得20万浏览。',
				imageUrl: "https://img.jukee.net/def/542b8202406101603397649.jpg",
				path: '/pages/goods_cate/goods_cate'
			}
		},
		onShareTimeline: function() {
			return {
				query: {
					activceCate: this.productList[this.navActive] ? this.productList[this.navActive].store_category_id : 0,
				}
			}
		},
		// #endif
		onShow() {
			let that = this
			let routes = getCurrentPages();
			let curRoute = routes[routes.length - 1].route
			this.activeRouter = '/' + curRoute
			let pid = uni.getStorageSync('storeIndex')
			if(pid) {
				this.activceCate = pid
				uni.removeStorageSync('storeIndex');
			}
			if(this.activceCate){
				this.getCateFrom(this.productList)
				pid && setTimeout(()=>this.tap(this.productList[this.pidIndex].label_id, 'b' + this.activceCate), 200);
			}
			// 判断登录
			if (that.isLogin) {
				that.getUserInfo();
			}
			that.getNav()
			that.getHostCircle();
		},
		onHide() {},
		onReady() {
			this.isNodes++;
		},
		
		methods: {
			goRouter(item, index) {
				if(index == 2) {
					this.isPublishPopup = true;
				} else if(index == 3) {
					uni.navigateTo({
						url: item.link
					})
				} else {
					var pages = getCurrentPages();
					var page = (pages[pages.length - 1]).$page.fullPath;
					if (item.link == page) return
					uni.switchTab({
						url: item.link,
						fail(err) {
							uni.redirectTo({
								url: item.link
							})
						}
					})
				}
			},
			getNav() {
				this.newData = this.navigation
				if (this.newData.status && this.newData.status.status) {
					uni.hideTabBar()
				} else {
					uni.showTabBar()
				}			
			},
			infoScroll: function() {
				let that = this;
				//this.number = that.productList[len - 1].children.length;
				//设置商品列表高度
				uni.getSystemInfo({
					success: function(res) {
						that.height = (res.windowHeight) * (750 / res.windowWidth) - 98;
					},
				});
				let hightArr = [];
				for (let i = 0; i < that.productList.length; i++) {
					let item = that.productList[i]
					/* if(!that.productList[i].children){
						continue;
					} */
					// for (let j = 0; j < that.productList[i].children.length; j++) {
						//获取元素所在位置
						let query = uni.createSelectorQuery().in(this);
						let idView = "#b" + item.label_id + i;
						query.select(idView).boundingClientRect();
						query.exec(function(res) {
							if(res[0]){
								let top = res[0].top;
								hightArr.push({top,i});
							}
						});
					// };
				};
				that.hightArr = hightArr;
			},
			bindTab(index){
				this.tabIndex = index;
				// 重新定义请求状态
				this.is_next_page_true = true;
				// 数据清空
				this.list_circle = [];
				// 分页从1开始
				this.page = 1;
				this.tap(this.productList[0].label_id, 1);
			},
			onChangeTag(data) {
				this.is_label_list_popup = false;
				this.tap(this.productList[data.index].label_id)
			},
			async tap(label_id, is_reload = 0) {
				if(!is_reload && this.check_label_id == label_id) return false;
				this.check_label_id = label_id;
				let productList = this.productList;
				let productListChilder = [];
				productList.map(function(item) {
					if (label_id == item.label_id) {
						productListChilder = item;
					}
				})
				this.productList_children = productListChilder.children ? this.$util.dataPagination(productListChilder.children, 9) : [];
				this.$set(this, 'productList_children', this.productList_children);
				this.is_next_page_true = true;
				this.list_circle = [];
				this.label_id = productListChilder.label_id;
				this.label_id2 = 0;
				this.navActive2 = -1;
				this.page = 1;
				await this.getListCircles();
			},
			tap3(data) {
				// console.log(666)
				this.tap(this.productList[data.detail.current].label_id)
			},
			tap2: function(label_id) {
				if(this.navActive2 == label_id) return false;
				this.navActive2 = label_id;
				this.is_next_page_true = true;
				this.list_circle = [];
				this.label_id2 = label_id;
				this.page = 1;
				this.getListCircles();
			},
			setValue: function(event) {
				this.$set(this, 'searchValue', event.detail.value);
			},
			searchCircle() {
				// 重新定义请求状态
				this.is_next_page_true = true;
				// 数据清空
				this.list_circle = [];
				// 分页从1开始
				this.page = 1;
				this.getListCircles();
			},
			/**
			 * 获取行业列表
			 */
			async getLabel(label_id) {
				let that = this,
					customerIndustry = this.$Cache.get('customerIndustry'),
					engagedIndustry = this.$Cache.get('engagedIndustry'),
					is_sort = true;
				await getLabelList({customerIndustry, engagedIndustry, is_sort}).then(res=>{
					that.productList = res.data.list;
					let label_data = res.data.list;
					let productListChilder = [];
					if (label_id > 0) {
						label_data.map(function(item) {
							if (label_id == item.label_id) {
								productListChilder = item;
							}
						})
					}
					console.log(label_id, productListChilder)
					that.productList_children = label_id ? (productListChilder.children ? that.$util.dataPagination(productListChilder.children, 9) : []) : (res.data.list[0].children ? that.$util.dataPagination(res.data.list[0].children, 9) : []);
					that.label_id = label_id ? label_id : res.data.list[0].label_id;
					that.check_label_id = label_id ? label_id : res.data.list[0].label_id;
					that.$nextTick(function(){
						setTimeout(() => {
							setTimeout(()=>that.tap(label_id ? label_id : res.data.list[0].label_id, 'b' + that.activceCate),200);
						}, 300);
					})
					setTimeout(() => {
						that.showSkeleton = false
					}, 500)
				}).catch(err=>{
					console.log('err', err);
				})
			},
			// 热门人脉圈
			getHostCircle()
			{
				let that = this;
				getListCircle({page:1, limit: 20, is_hp_promo: 1}).then(res => {
					that.list_host_circle = res.data.list
				})
			},
			getListCircles()
			{
				let that = this;
				if(!that.is_next_page_true) return false;
				if(!that.loading) return false;
				let data = {
					label_id: that.label_id,
					label_id2: that.label_id2 ? that.label_id2 : '',
					title: that.searchValue,
					page: that.page,
					limit: that.limit,
					is_ind_promo: that.tabIndex == 0 ? 1 : '',
				}
				that.loading = false;
				getListCircle(data).then(res => {
					that.list_circle = that.list_circle.concat(res.data.list)
					that.is_next_page_true = res.data.list.length >= that.limit;
					that.page++
					that.loading = true;
				}).catch(err=>{
					that.loading = true;
				})
			},
			loadMoreData()
			{
				this.getListCircles();
			},
			//获取首页分类来源
			getCateFrom: function(arr) {
				let i = ""
				arr.map((item, index) => {
					if ((this.activceCate && item.store_category_id == this.activceCate)) {
						this.pidIndex = index
						i = 'sort' + index
						return;
					}
				})
				this.$nextTick(() => {
					this.intoindex = i
				})
			},
			scroll: function(e) {
				return false;
				uni.$emit('scroll');
				let scrollTop = e.detail.scrollTop + 10;
				let scrollArr = this.hightArr;
				for (let i = 0; i < scrollArr.length; i++) {
					if (scrollTop >= scrollArr[i].top - scrollArr[0].top && scrollTop < (scrollArr[i + 1] ? scrollArr[i + 1].top : 0) - scrollArr[0].top) {
						this.navActive = scrollArr[i].i
					} else if (scrollTop >= scrollArr[scrollArr.length - 1].top - scrollArr[0].top) {
						this.navActive = scrollArr[scrollArr.length - 1].i
					}else if (scrollTop >= 0 && scrollTop < scrollArr[1].top - scrollArr[0].top) {
						this.navActive = 0
					}
				}
			},
			getCircleInfo(circle_id) {
				let that = this;
				if(!that.isLogin) return that.$util.Tips({title:'请先登录'}, {tab: 1, url: '/pages/user/index'})
				getAttentionCircle(circle_id).then(res=>{
					if(res.status == 200 && res.data.pay_type){
						return that.$util.Tips('/pages/extends/circle_create/circle_info?id='+circle_id)
					}
					return that.$util.Tips('/pages/extends/circle_create/circle_pay?id='+circle_id);
				}).catch(err=>{
					that.$util.Tips({title: err})
				})
			},
			closePublishPopup() {
				this.isPublishPopup = false;
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data;
				});
			},
		}
	}
</script>
<style scoped lang="scss">
	.navTabBox{
		background: #fff;
	}
	.longTab{
		display: flex;
		text-align: center;
	}
	.tab-item{
		width: 50%;
		display: inline-block;
		padding: 30rpx 0;
		text{
			position: relative;
			display: inline-block;
			font-size: 34rpx;
			color: #323232;
			line-height: 52rpx;
		}
	}
	.tab-item.on{
		color: var(--view-theme);
		text{
			font-size: 38rpx;
			&:after{
				content: "";
				display: inline-block;
				width: 90%;
				height: 15rpx;
				// background-color: var(--view-theme);
				background: url('http://ly.jukee.net/uploads/default/20230629/335f742a6bee3fdbc75d81c86c6ba350.png') center / contain no-repeat;
				position: absolute;
				left: 5%;
				bottom: -20rpx;
			}
		}
	}
	.productSort {
		display: flex;
		flex-direction: column;
		width: 100%;
		.con-box {
			flex: 1;
			display: flex;
			overflow: hidden;
		}
		.search {
			padding: 20rpx 0 20rpx 30rpx;
			background-color: #fff;
		}
		.search .input {
			width: 598rpx;
			background-color: #f7f7f7;
			border-radius: 33rpx;
			padding: 0 35rpx;
			box-sizing: border-box;
			height: 66rpx;
		}
		.search .input input {
			width: 472rpx;
			font-size: 28rpx;
		}
		.search .input .placeholder {
			color: #bbb;
		}
		.search .input .iconfont {
			color: #000;
			font-size: 35rpx;
		}
		.search .bnt {
			width: 120rpx;
			text-align: center;
			height: 66rpx;
			line-height: 66rpx;
			font-size: 30rpx;
			color: #282828;
		}
	}
	// .productSort .header {
	// 	width: 100%;
	// 	height: 96rpx;
	// 	background-color: #fff;
	// 	border-bottom: 1px solid #f5f5f5;
	// }
	// .productSort .header .input {
	// 	width: 700rpx;
	// 	height: 60rpx;
	// 	background-color: #f5f5f5;
	// 	border-radius: 50rpx;
	// 	box-sizing: border-box;
	// 	padding: 0 25rpx;
	// }

	// .productSort .header .input .iconfont {
	// 	font-size: 35rpx;
	// 	color: #555;
	// }
	// .productSort .header .input .placeholder {
	// 	color: #999;
	// }
	// .productSort .header .input .input-box {
	// 	display: flex;
	// 	align-items: center;
	// 	font-size: 26rpx;
	// 	height: 100%;
	// 	width: 597rpx;
	// 	color: #999999;
	// }
	.productSort .aside {
		// background-color: #fff;
		overflow-y: auto;
		overflow-x: hidden;
		width: 170rpx;
		height: 100%;
		overflow: hidden;
	}
	.productSort .aside .item {
		width: 100%;
		font-size: 26rpx;
		font-weight: 400;
		color: #313131;
		line-height: 38rpx;
		padding: 36rpx 0;
		text-align: center;
	}
	.productSort .aside .item_text {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 30rpx;
		font-weight: 500;
		color: #000000;
		line-height: 44rpx;
		position: relative;
	}
	.productSort .aside .item.on {
		background-color: #fff;
		width: 100%;
		text-align: center;
		font-weight: bold;
		position: relative;
	}
	.productSort .aside .item.on::before{
		content: "";
		display: inline-block;
		width: 80%;
		height: 24rpx;
		background-color: #FFE103;
		position: absolute;
		bottom: 30rpx;
		left: 10%;
	}
	.productSort .conter {
		flex: 1;
		height: 100%;
		background-color: #fff;
		overflow: hidden;
	}
	.productSort .conter .listw {
		// display: grid;
		// grid-template-columns: repeat(3, 1fr);
		// grid-gap: 20rpx;
		// text-align: center;
		// padding: 20rpx;
		background: #ffff;
		position: sticky;
		top: 0;
		z-index: 2;
	}
	.productSort .conter .listw .swiper_list_user {
		width: 100%;
		height: 250rpx;
	}
	.productSort .conter .listw .swiper_list_user .list_user {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 20rpx;
		text-align: center;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
	.productSort .conter .listw .children_label {
		background: #F6F7FB;
		border-radius: 32rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding: 10rpx;
		font-size: 26rpx;
		height: fit-content;
	}
	.productSort .conter .listw .children_label_on {
		background: #FFE103;
	}
	.productSort .conter .listw .title {
		height: 100rpx;
		align-items: center;
	}
	.productSort .conter .listw .title .line {
		width: 100rpx;
		height: 2rpx;
		background-color: #f0f0f0;
	}
	.productSort .conter .listw .title .name {
		font-size: 28rpx;
		color: #333;
		margin: 0 30rpx;
		font-weight: bold;
	}
  .productSort .conter .listw .title .list_title,
	.productSort .conter .listw .title uni-image,
	.productSort .conter .listw .title image{
		width: 110rpx;
		height: 26rpx;
		border-radius: 0;
	}
	.productSort .conter .list {
		flex-wrap: wrap;
		background: #fff;
		border-radius: 16rpx;
		padding-bottom: 26rpx;
	}
	.productSort .conter .list .item {
		width: 174rpx;
		margin-top: 26rpx;
	}
	.productSort .conter .list .item .picture,
	.productSort .conter uni-image,
	.productSort .conter .list .item image,
	::v-deep .easy-loadimage{
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}
	.productSort .conter .list .item .name {
		font-size: 24rpx;
		color: #333;
		height: 56rpx;
		line-height: 56rpx;
		width: 120rpx;
		text-align: center;
	}
	// 设圈广场
	.popular_circle {
		padding: 40rpx 30rpx;
		flex: 1;
		overflow-y: auto;
		box-sizing: border-box;
		.popular_circle_t {
			position: relative;
			width: fit-content;
			&:before {
				content: "";
				display: inline-block;
				width: 100%;
				height: 22rpx;
				background-color: #FFE103;
				position: absolute;
				bottom: 0;
				left: 0;
			}
			.popular_circle_title {
				font-size: 40rpx;
				font-weight: 500;
				color: #2C2C2C;
				line-height: 56rpx;
				position: relative;
			}
		}
		.circle_hot_list {
			margin-top: 30rpx;
			display: flex;
			flex-wrap: nowrap;
			grid-gap: 20rpx;
			overflow-x: auto;
		}
		.popular_circle_item {
			position: relative;
			min-width: 266rpx;
			max-width: 266rpx;
			height: 300rpx;
			.popular_circle_item_c {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.4);
				padding: 20rpx;
				border-radius: 14rpx;
			}
			.popular_circle_label {
				position: absolute;
				width: 62rpx;
				height: 42rpx;
				top: 0;
				right: 0;
			}
			.popular_circle_item_cotent {
				width: 160rpx;
				display: flex;
				height: 100%;
				flex-direction: column;
				.popular_circle_item_title {
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 44rpx;
					height: 90rpx;
				}
				.popular_circle_item_avatar {
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					image {
						width: 44rpx;
						height: 44rpx;
						border-radius: 50%;
						margin-left: -10rpx;
					}
					image:first-child {
						margin-left: 0rpx;
					}
				}
				.popular_circle_item_num {
					font-size: 20rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 28rpx;
					margin-top: 10rpx;
				}
				.popular_circle_item_join {
					background: #F2F63C;
					border-radius: 28rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #1C211D;
					line-height: 36rpx;
					width: fit-content;
					padding: 10rpx 36rpx;
					margin-top: auto;
					font-weight: bold;
				}
				.is_user_circle {
					background-color: #53BB47;
				}
			}
		}
		.popular_circle_tag {
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			margin-top: 30rpx;
			overflow: hidden;
			.nav-label-list {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex-wrap: nowrap;
				white-space: nowrap;
				width: 630rpx;
				.nav-label-tab {
					display: inline-block;
					white-space: nowrap;
					text-align: center;
					max-width: 160rpx;
					line-height: 44rpx;
					margin-right: 40rpx;
					position: relative;
					font-size: 32rpx;
					color: #1C211D;
				}
				.nav-label-active {
					font-size: 34rpx;
					font-weight: 600;
					color: red;
				}
			}
			.popular_circle_tag_list {
				flex: 1;
				display: flex;
				flex-wrap: nowrap;
				white-space: nowrap;
				grid-gap: 30rpx;
				overflow: hidden;
				.popular_circle_tag_item {
					font-size: 32rpx;
					font-weight: 400;
					color: #1C211D;
					line-height: 44rpx;
					margin-right: 40rpx;
					display: inline-block;
				}
				.popular_circle_tag_item_on {
					font-size: 34rpx;
					font-weight: 600;
					color: red;
				}
			}
			.more_label {
				width: 40rpx;
				display: flex;
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
	// 人脉圈列表
	.circle-list-popular {
		.circle-item {
			display: flex;
			margin: 10rpx 10rpx 0;
			padding: 20rpx;
			background-color: #fff;
			.circle-item-avatar {
				position: relative;
				.unread-message {
					position: absolute;
					right: -6px;
					top: -6px;
					width: 40rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					background: #FB2C26;
					border-radius: 50%;
					font-size: 20rpx;
					z-index: 1;
				}
				image{
					width: 120rpx;
					height: 120rpx;
					border-radius: 20rpx;
				}
			}
			.circle-item-info {
				flex: 1;
				margin-left: 20rpx;
				// padding-top: 10rpx;
				overflow: hidden;
				.circle-item-title {
					font-size: 36rpx;
					font-weight: bold;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.circle-item-label_name {
					margin-top: 10rpx;
					font-size: 30rpx;
				}
			}
			.circle-item-button {
				margin-left: auto;
				display: flex;
				align-items: center;
				.circle-item-button_btn {
					font-size: 36rpx;
					font-weight: bold;
					padding: 20rpx 30rpx;
					background-color: var(--view-theme);
					border-radius: 40rpx;
				}
				.is_user_circle {
					background-color: #53BB47;
				}
			}
		}
	}
	// 人脉圈列表2
	.circle-item {
		display: flex;
		// margin: 10rpx 10rpx 0;
		padding: 30rpx;
		background-color: #fff;
		margin-top: 20rpx;
		.circle-item-avatar {
			position: relative;
			.unread-message {
				position: absolute;
				right: -6px;
				top: -6px;
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				background: #FB2C26;
				border-radius: 50%;
				font-size: 20rpx;
				z-index: 1;
			}
			image{
				width: 160rpx;
				height: 160rpx;
				border-radius: 20rpx;
			}
		}
		.circle-item-info {
			flex: 1;
			margin-left: 20rpx;
			padding-top: 10rpx;
			overflow: hidden;
			.circle-item-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #323232;
				line-height: 44rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.circle-item-label_name {
				margin-top: 10rpx;
				    font-size: 24rpx;
			}
			.circle-item-gz {
				display: flex;
				align-items: center;
				margin-top: 12rpx;
				.circle-item-gz-icon {
					width: 28rpx;
					height: 28rpx;
				}
				.circle-item-gz-num {
					font-size: 28rpx;
					font-weight: 400;
					color: #323232;
					line-height: 34rpx;
					margin-left: 4rpx;
				}
			}
			.circle-item-gz-user {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				image {
					width: 30rpx;
					height: 30rpx;
					border-radius: 100%;
					margin-left: -10rpx;
				}
				image:first-child {
					margin-left: 0rpx;
				}
			}
			.circle-item-gz-tl {
				font-size: 28rpx;
				font-weight: 400;
				color: #323232;
				line-height: 28rpx;
				margin-left: 10rpx;
			}
		}
		.circle-item-button {
			margin-left: auto;
			display: flex;
			align-items: center;
			.circle-item-button_btn {
				font-size: 30rpx;
				font-weight: 500;
				color: #1C211D;
				line-height: 42rpx;
				background: #F2F63C;
				border-radius: 37rpx;
				padding: 16rpx 42rpx;
				font-weight: bold;
			}
			.is_user_circle {
				background-color: #53BB47;
			}
		}
	}
	// 人脉圈列表end
	.page-footer {
		position: fixed;
		bottom: 0;
		z-index: 30;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		height: calc(120rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(120rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		box-sizing: border-box;
		border-top: 1px solid #F3F3F3;
		background-color: #fff;
		box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
		padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
		&.filter{
			filter: blur(2rpx);
		}
		.foot-item {
			display: flex;
			width: max-content;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			position: relative;
			line-height: 50rpx;
			padding: 0 30rpx;
			position: relative;
			.count-num {
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 40rpx;
				height: 40rpx;
				top: 0rpx;
				right: -15rpx;
				color: #fff;
				font-size: 20rpx;
				background-color: #FD502F;
				border-radius: 50%;
				padding: 4rpx;
			}
			.remind_tips {
				position: absolute;
				background-color: red;
				border-radius: 50%;
				width: 40rpx;
				height: 40rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				right: 10rpx;
				top: -20rpx;
				font-size: 24rpx;
			}
		}
		.foot-item image {
			height: 50rpx;
			width: 50rpx;
			text-align: center;
			margin: 0 auto;
		}
		.foot-item .foot-item-add {
			width: 120rpx;
			height: 120rpx;
			// margin-bottom: 70rpx;
		}
		.foot-item .txt {
			font-size: 26rpx;
		}
	}
</style>